<template>
  <div>
    <a-card :bordered="false" style="margin-left: 80px">
      <div style="text-align:center">
        <span style="font-size: xx-large;">{{artInfo.title}}</span>
      </div>
      <div style="margin-top: 30px">
        <a-row>
          <a-col :span="6">
            <a-icon type="paper-clip" />:
            <a-tag :key="artInfo.Category.ID" color="blue">{{ artInfo.Category.name }}</a-tag>
          </a-col>
          <a-col :span="18">
            <a-icon type="tags" />:
            <a-tag v-for="tag in artInfo.Tags" :key="tag.ID" color="blue" >{{ tag.name }}</a-tag>
          </a-col>
        </a-row>
      </div>
      <div style="margin-top: 30px">
       <p style="font-size: large;margin-left: 20px">{{artInfo.desc}}</p>
      </div>
      <!-- Markdown编辑器 -->
      <mavon-editor v-model= "artInfo.content"
                    :subfield = "false"
                    :toolbarsFlag = "false"
                    :editable="false"
                    :scrollStyle="true"
                    defaultOpen="preview"
                    codeStyle="atom-one-light"
                    :boxShadow="true"
                    previewBackground="white"
                    boxShadowStyle="0 0px 0px 0 rgba(0, 0, 0, 0)"
                    style="height:100%;z-index: 999;font-size: 16px;" />
      <div>
        <span style="margin-left: 20px">
          <a-icon type="eye-o" style="margin-right: 8px" />
          <span>{{ artInfo.viewnum }}</span></span>
        <span style="margin-left: 20px">
          <a-icon type="heart-o" style="margin-right: 8px" />
          <span>{{ artInfo.likenum }}</span>
        </span>
        <span style="margin-left: 20px" >
          <a-icon type="clock-circle" style="margin-right: 8px" />
          <span v-text="dataFormat(artInfo.UpdatedAt)"></span>
        </span>
      </div>
    </a-card>
  </div>

</template>

<script>
import moment from 'moment/moment'

export default {
  props: ['id'],
  data () {
    return {
      artInfo: {
        id: 0,
        title: '',
        cid: '',
        tids: [],
        desc: '',
        content: '',
        status: 0,
        Tags: []
      },
      // markdown编辑器代码样式 monokai-sublime
      codeStyle: 'atom-one-light' // 主题
    }
  },
  mounted () {
    this.getArtInfo(this.$route.params.id)
  },
  methods: {
    async getArtInfo (id) {
      const { data: res } = await this.$axios.get(`/client/article/${id}`)
      if (res.status !== 200) {
        return this.$message.error(res.message)
      }
      this.artInfo = res.data
      this.artInfo.id = res.data.ID
    },
    dataFormat (val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
    }
  },
  watch: {
    '$route' (to, from) {
      this.getArtInfo(this.$route.params.id)
    }
  }

}
</script>

<style scoped>

</style>
